<template>
	<view class="content">
		<!-- {{web}} -->
    <view class="login" v-if="web === 0">
      <input class="text" type="text" placeholder="请输入账号" v-model="account" />
      <input class="text" type="password" placeholder="请输入密码" v-model="password" />
      <span class="btn" @click="login">登录</span>
    </view>
    
    <!-- 保洁 -->
    <template v-if="web === 1">
      <u-sticky>
        <view class="u-flex u-row-between shaixuan">
          <view v-for="(item, index) in shaixuanList" :key="index" :class="{on : item.id === shaixuanType && showShaix}" class="item u-flex u-col-center" @click="getShaix(item.id)">
            <text class="u-m-r-10">{{item.name}}</text>
            <u-icon name="arrow-down-fill" size="20" :color=" item.id === shaixuanType && showShaix ? '#2A70F9' : '#3C3D3E'"></u-icon>
          </view>
        </view>
      </u-sticky>
      <view class="list">{{web}}</view>
      <view class="list" v-if="list.length > 0">
        <view v-for="(item, index) in list" :key="index" class="item" v-show="!(item.status == 0 && item.check_status == 0)">
          <image src="https://xt.vipsups.com/uploads/20240602/12416fa4c7f40b6de8d6ff59e6f9d384.png" mode="" class="img"></image>
          <view class="div">
            <view class="name">{{item.room_types.name}}-{{item.name}}号</view>
            <view class="t1">{{item.hotels.hotel_name}}</view>
            <view>{{item.status}}--{{item.check_status}}</view>
          </view>
          <!-- status == 1 && check_status = 0  需要打扫
          status == 1 && check_status = 1  打扫中
          status == 0 && check_status = 0  打扫完成
           `check_status 0 正常 1：打扫中 '
           -->
          <view class="btns">
            <view class="btn btn1" @click="clearItem(1, item.id, index)" v-if="item.status == 4 && item.check_status == 1">打扫中</view>
            <view class="btn btn2" @click="clearItem(2, item.id, index)" v-else-if='item.status == 4 && item.check_status == 0'>待打扫</view>
            <view class="btn btn3" v-else-if="item.status == 0 && item.check_status == 0">打扫完成</view>
          </view>
        </view>
        <view v-if="list.length === 0" style="color: #999; text-align: center; padding: 100rpx 0;">暂无需要打扫的房间</view>
      </view>
    </template>
    <!-- 维修 -->
    <template v-else-if="web === 3">
      <u-sticky>
        <view class="u-flex u-row-between shaixuan">
          <view v-for="(item, index) in shaixuanList1" :key="index" :class="{on : item.id === shaixuanType && showShaix}" class="item u-flex u-col-center" @click="getShaix(item.id)">
            <text class="u-m-r-10">{{item.name}}</text>
            <u-icon name="arrow-down-fill" size="16" color="#3C3D3E"></u-icon>
          </view>
        </view>
      </u-sticky>
      <view class="list" v-if="list.length > 0">
        <view v-for="(item, index) in list" :key="index" class="item" v-show="!(item.status == 0 && item.check_status == 0)">
          <image v-if="item.picList && item.picList.length > 0" :src="http+item.picList[0].image" mode="aspectFill" class="img"></image>
          <view class="div">
            <template class="name" v-if="item.hotel">
              <view class="name">{{item.hotel.hotel_name}}</view>
              <view class="name1">房间号：{{item.room_info.name}}</view>
            </template>
            <template v-else>
              <view class="name">{{item.status_text}}</view>
              <view class="lab">{{item.decorationName}}</view>
              <view class="price">{{item.house_rent}}元/月</view>
            </template>
          </view>
          <view class="btns">
            <!-- 0-待维修, 1-已维修 -->
            <view class="btn btn1" @click="clickItem(item.id, index)" v-if="item.status == 0">待维修</view>
            <view class="btn btn2" v-else>已维修</view>
          </view>
        </view>
        <view v-if="list.length === 0" style="color: #999; text-align: center; padding: 100rpx 0;">暂无需要打扫的房间</view>
      </view>
    </template>
    
    <template v-if="showShaix && web == 1">
      <u-popup v-model="showShaix" :top="0" mode="top" border-radius="0" class="pup">
        <view class="pup-list" v-if="shaixuanType == 2">
          <view v-for="item in typeList" :key="item.id" class="item" :class="{on: room_type_id == item.id}" @click="getKeyId(item.id, 'room_type_id')">
            {{item.name}}
            <u-icon v-if="room_type_id == item.id" name="checkbox-mark" size="34" color="#2A70F9"></u-icon>
          </view>
        </view>
        <view class="pup-list" v-if="shaixuanType == 3">
          <view v-for="item in statusList" :key="item.id" class="item" :class="{on: status == item.id}" @click="getKeyId(item.id, 'status')">
          {{item.name}}
          <u-icon v-if="status == item.id" name="checkbox-mark" size="34" color="#2A70F9"></u-icon>
          </view>
        </view>
      </u-popup>
    </template>
    
    <template v-if="showShaix && web == 3">
      <u-popup v-model="showShaix" :top="0" mode="top" border-radius="0" class="pup">
        <view class="pup-list" v-if="shaixuanType == 1">
          <view v-for="item in hotelList1" :key="item.id" class="item" :class="{on: hotel_id == item.id}" @click="getKeyId(item.id, 'hotel_id')">
            {{item.hotel_name}}
            <u-icon v-if="hotel_id == item.id" name="checkbox-mark" size="34" color="#2A70F9"></u-icon>
          </view>
        </view>
        <view class="pup-list" v-if="shaixuanType == 2">
          <view v-for="item in typeList1" :key="item.id" class="item" :class="{on: room_type_id == item.id}" @click="getKeyId(item.id, 'room_type_id')">
            {{item.name}}
            <u-icon v-if="room_type_id == item.id" name="checkbox-mark" size="34" color="#2A70F9"></u-icon>
          </view>
        </view>
        <view class="pup-list" v-if="shaixuanType == 3">
          <view v-for="item in statusList1" :key="item.id" class="item" :class="{on: status == item.id}" @click="getKeyId(item.id, 'status')">
          {{item.name}}
          <u-icon v-if="status == item.id" name="checkbox-mark" size="34" color="#2A70F9"></u-icon>
          </view>
        </view>
      </u-popup>
    </template>
    
    
    
	</view>
</template>

<script>
  const cleanListsApi = "api/clean.index/lists";// 保洁---房间列表
  const cleanLoginApi = "api/clean.index/login"; // 登录
  const cleanConfirmApi = "api/clean.index/confirm"; // 设置打扫成功
  const cleaningApi = "api/clean.index/cleaning"; // 设置打扫中
  const cleanRoomTypeListApi = "api/clean.index/roomTypeList"; // 房间类型
  const repairReportListApi = "api/engineer.repair_report/repairReportList"; //获取我的报修列表（维修工程师调用）
  const updateRepairReportApi = "api/engineer.repair_report/updateRepairReport"; // 更新维修状态（工程师调用）
  const repairReportListConfigApi = "api/engineer.repair_report/repairReportListConfig"; // 获取我的报修列表 刷选配置（维修工程师调用）
  
	export default {
		data() {
			return {
				account: '',
        password:'',
        web:9, // 0-登录， 1-保洁列表, 3-维修列表
        list:[],
        shaixuanList:[ {id:2, name:'房型'}, {id:3, name:'状态'}],
        showShaix: false,
        showShaix1: false,
        typeList:[],
        status:'', // 状态
        room_type_id:'', // 房型id
        statusList:[{id:1, name:'未打扫'}, {id:2, name:'打扫中'}],
        shaixuanType:1, // 1-房型， 2-状态
        user_type: 0, // 3-维修工
        
        
        hotel_id:'', // 酒店id
        shaixuanList1:[ {id:1, name:'酒店'}, {id:2, name:'房型'}, {id:3, name:'状态'}],
        statusList1:[], // 维修状态列表
        typeList1:[], // 房间类型列表
        hotelList1:[], // 酒店类型列表
        http:'https://xt.vipsups.com/',
        total:-1,
        page:1
			}
		},
		onShow() {
      if(uni.getStorageSync('token')){
        this.user_type = uni.getStorageSync('user_type')
        uni.showTabBar()
      }else{
        this.web = 0;
        uni.hideTabBar()
      }
		},
    onLoad(){
      if(uni.getStorageSync('token')){
        this.user_type = uni.getStorageSync('user_type')
        this.getList()
        this.getHouseTypeList();
        this.getShaixuan();
      }
    },
		methods: {
      getShaix(e){
        if(this.shaixuanType === e){
          this.showShaix = !this.showShaix;
        }else{
          this.shaixuanType = e;
          this.showShaix = true;
        }
      },
      getKeyId(e,name){
        this.page = 1;
        this.list = []
        this[name] = e;
        this.showShaix = false;
        this.getList()
      },
      // 0-待维修, 1-已维修 
      clickItem(id, index){
        const that = this;
        uni.showModal({
        	title: '提示',
        	content: '该笔维修已完成',
        	success: function (res) {
        		if (res.confirm) {
        			that.ajax('post',updateRepairReportApi, {
        			  id: id
        			},res=>{
        			  that.list[index].status = 1;
        			})
        		} else if (res.cancel) {
        			console.log('用户点击取消');
        		}
        	}
        });
      },
      // 打扫  1-打扫中, 2--待打扫
      clearItem(e, id, index){
        const that = this;
        const msg = e == 1 ? '确认房间打扫完成吗？' : '确认房间打扫中吗？';
        const api  = e == 1 ? cleanConfirmApi : cleaningApi
        const list = [...this.list]
        console.log('this.list---->', this.list)
        uni.showModal({
        	title: '提示',
        	content: msg,
        	success: function (res) {
            
        		if (res.confirm) {
        			that.ajax('get',api, {
        			  roomId: id
        			},res=>{
        			  if(e == 2){
        			    list[index].check_status = 1;
        			    that.list = list;
        			  }else{
        			    list[index].status = 0;
        			    list[index].check_status = 0;
        			    that.list = list;
        			    console.log('00000000', list[index])
        			  }
        			})
        		} else if (res.cancel) {
        			console.log('用户点击取消');
        		}
        	}
        });
      },
      // 登录
      login(){
        this.ajax('POST',cleanLoginApi, {
          account: this.account,
          password:this.password,
        },res=>{
          this.web = 1;
          console.log('登录', res)
          this.user_type = res.userinfo.user_type
          uni.setStorageSync('token', res.userinfo.token);
          uni.setStorageSync('user_type', res.userinfo.user_type);
          uni.setStorageSync('userinfo', JSON.stringify(res.userinfo));
          this.getList()
          this.getShaixuan();
          uni.showTabBar()
        })
      },
      // 保洁---房间列表
      getList(){
        let data = {limit:1000, status: this.status, room_type_id: this.room_type_id}
        let api = cleanListsApi;
        if( this.user_type == 3 ){
          data = {
            limit:1000,
            page:this.page,
            hotel_id:this.hotel_id,
            room_type_id:this.room_type_id,
            status:this.status
          }
          api = repairReportListApi
          this.web = 3;
        }else{
          this.web = 1;
        }
        this.ajax('POST',api, data,res=>{
          this.list = this.list.concat(res.data);
          this.total = res.total
          if(this.total > this.list.length ){
            this.page++
          }
        })
      },
      getShaixuan(){
        this.ajax('POST',repairReportListConfigApi, {},res=>{
          console.log('dasd', res)
          this.ShaixuanData = res
          this.statusList1 = res.status;
          this.typeList1 = res.type;
          this.hotelList1 = res.hotelSelect;
        })
      },
      // 保洁---房间类型
      getHouseTypeList(){
        this.ajax('GET', cleanRoomTypeListApi, {}, res=>{
          this.typeList = res
        })
      },
      ajax(method, url, data, fun){
        uni.request({
            url: this.http+url, //仅为示例，并非真实接口地址。
            data: data,
            method:method,
            header: {
                'token': uni.getStorageSync('token') || '' //自定义请求头信息
            },
            success: (res) => {
              console.log(res.data);
              this.text = 'request success';
              if(res.data.code === 1){
                fun(res.data.data)
              }else if(res.data.code === 401){
                this.web = 0
              }else{
                uni.showToast({
                  title:res.data.msg,
                  icon:"none"
                })
              }
            }
        });
      },
      
		},
    onReachBottom(){
      console.log('触发')
      if(this.total > this.list.length ){
        this.getList()
      }
    }
	}
</script>

<style lang="less">
  *{box-sizing: border-box;}
  body,/deep/.uni-page-body{background-color: #fff;}
  .login{
    padding: 50rpx 30rpx;
    .text{width: 100%; height: 90rpx; border: 1px solid #ededed; border-radius: 4rpx; margin-bottom: 25rpx; padding: 0 20rpx; background-color: #fff;}
    .btn{width: 100%; background-color: royalblue; color: #fff; display: flex; align-items: center; justify-content: center; height: 90rpx; border: 4rpx; margin-top: 40rpx; border-radius: 4rpx;}
  }
  .shaixuan{
    padding: 0 30rpx;
    .item{padding:30rpx 20rpx;}
    .on{color: #2A70F9;}
  }
  .on /deep/.uicon-arrow-down-fill{transform: rotate(180deg);}
  .pup-list{
    background-color: #fff; padding-top: 110rpx;
    .item{padding: 0 50rpx; border-top: 1px solid #f5f5f5; display: flex; align-items: center; justify-content: space-between; height: 90rpx;}
    .item.on{color: #2A70F9;}
    .item:first-child{border-top: none;}
  }
  /deep/.u-sticky{top: 0 !important; z-index: 9999 !important; background-color: #fff;box-shadow: 0 0 5px #ddd;}
  /deep/.u-sticky-wrap{position: relative; z-index: 99999; }
  .list{
    padding: 0 30rpx;
    .img{width: 200rpx; height: 160rpx; border-radius: 10rpx; overflow: hidden; object-fit: cover;}
    .name{font-size: 36rpx; margin-bottom: 20rpx; line-height: 45rpx; max-height: 90rpx; overflow: hidden; font-weight: bold;}
    .t1{font-size: 32rpx; color: #555;}
    .item{
      display: flex; align-items: center;justify-content: space-between; padding: 30rpx 0; border-bottom: 1px solid #ededed; position: relative;
      .div{
        width: 100%; flex: 1; margin: 0 20rpx 0 20rpx;
        .name{font-size: 36rpx; font-weight: bold; margin-bottom: 10rpx;}
        .lab{font-size: 28rpx; color: #666; margin-bottom: 10rpx;}
        .price{color:#2A70F9;}
      }
      .btn{display: flex; align-items: center; justify-content: center; width: 180rpx; border-radius: 4rpx; height: 80rpx;
        
        // position: absolute; right: 0; top: 0; height: 80rpx; right: 0; top: 50%; transform: translateY(-50%); 
      }
      .btn1{background-color:#2A70F9; color: #fff; }
      .btn2{background-color:#f48621; color: #fff;}
      .btn3{color:#2A70F9; font-weight: bold;}
    }
  }
	
</style>
